<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查找小说</title>
    <link rel="stylesheet" type="text/css" href="CSS/all.css"  th:href="@{/CSS/all.css}"/>
    <link rel="stylesheet" type="text/css" href="CSS/home.css" th:href="@{/CSS/home.css}"/>
    <link rel="stylesheet" type="text/css" href="CSS/fl.css"  th:href="@{/CSS/fl.css}" />
    <script th:src="@{/JS/jquery.js}"></script>

</head>
<body>
<header>首页</header>
<div class="title">
    <a th:href="@{/Story/getAllCategoryStoryList(isLogin='')}" class="activetitle">首页</a>
    <a th:href="@{/Category/getBookByCategoryId(CategoryId=0)}">分类</a>
    <a th:href="@{/Store/getTotalPage(index=5)}">排行</a>
    <a th:href="@{/Story/getStoryEndPage(status='已完结')}">全本</a>
    <a th:href="@{/Store/getUserInfo}">会员中心</a>
</div>
<div class="searchinput">
    <input class="searchBook" type="text" th:value="${StoryList['searchName']}"  placeholder="请输入书名或作者" />
    <button  class="search"><svg class="icon" style="width: 1.5rem; height: 1.5rem;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1128"><path d="M963.80969 874.914509 746.640896 653.056614c-3.587891-3.66551-7.710925-6.443725-12.110336-8.352256 46.655488-62.60183 74.359501-140.751667 74.359501-225.526477 0-205.788877-163.237376-372.568371-364.609741-372.568371C242.909082 46.60951 79.67785 213.390029 79.67785 419.177984c0 205.792973 163.231232 372.569395 364.603597 372.569395 92.421632 0 176.807936-35.134157 241.069056-93.044122 1.778586 3.55799 4.115866 6.89705 7.027302 9.871872l217.115546 221.85687c14.970573 15.300506 39.292518 15.300506 54.316237 0C978.780262 915.131494 978.780262 890.21399 963.80969 874.914509zM444.281446 732.950221c-169.564672 0-307.06176-140.4928-307.06176-313.772237 0-173.332685 137.496064-313.766195 307.06176-313.766195 169.570816 0 307.06176 140.433408 307.06176 313.766195C751.343206 592.457421 613.851238 732.950221 444.281446 732.950221z" p-id="1129"></path></svg></button>
</div>
<main>

    <ul  th:each="objs : ${StoryList['objs']}">
        <li ><span class="" th:text="${objs.categoryName}" ></span><a th:href="@{/Chapter/getChapterByBookId(bookId=${objs.id})}" th:text="${objs.name}"></a><span th:text="${objs.author}"></span></li>
    </ul>

    <div th:if="${StoryList['objs'].size()<=0}" style="text-align:center;margin-top: 30px;">暂无数据</div>
    <div class="fycontrol" th:if="${StoryList['objs'].size()>0}">
        <div class="fenye">
            <a th:if="${StoryList['currentPage']>1}" onclick="getHome()">首页</a>
            <a th:if="${StoryList['currentPage']>1}" onclick="getPre()">上一页</a>
            <a th:if="${StoryList['currentPage']<StoryList['total']}" onclick="getNext()">下一页</a>
            <a th:if="${StoryList['currentPage']<StoryList['total']}" onclick="getLast()">尾页</a>
        </div>
        <div class="yema">第<span>[[${StoryList['currentPage']}]]/[[${StoryList['total']}]]</span>页<input class="tz" type="text" /><button onclick="getYema()">跳转</button></div>
    </div>



</main>
</body>
<script  th:inline="javascript">
    //搜索条件
    var searchName = $(".searchBook").val();
    //当前页
    var page = [[${StoryList['currentPage']}]];
    //总页
    var total = [[${StoryList['total']}]];



    //首页
    function  getHome() {
        location.href='/Story/getStoryList?nameOrAuthor='+searchName+'&page=0';
    }
    //上一页
    function getPre(){
        location.href='/Story/getStoryList?nameOrAuthor='+searchName+'&page='+(page-1);
    }
    //下一页
    function getNext(){
        location.href='/Story/getStoryList?nameOrAuthor='+searchName+'&page='+((page*1==total*1)?(total*1):(page+1));
    }
    //尾页
    function getLast(){
        location.href='/Story/getStoryList?nameOrAuthor='+searchName+'&page='+total;
    }

    function getYema(){
        //跳转页
        var tzPage = $(".tz").val();
        if (tzPage>total){
            tzPage=total;
        }
        location.href='/Story/getStoryList?nameOrAuthor='+searchName+'&page='+(tzPage*1);
    }
    $('button.search').click(function(){
        var nameOrAuthor = $(".searchBook").val();
        console.log(nameOrAuthor);
        location.href='/Story/getStoryList?nameOrAuthor='+nameOrAuthor;
    })

</script>
</html>